<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片</td>
        <td><img src="person.url" width="50" alt=""></td>
    </tr>
    <tr>
        <td>名字</td>
        <td>{{person.name}}</td>
    </tr>
    <tr>
        <td>年龄</td>
        <td>{{person.age}}</td>
    </tr>
    <tr>
        <td>好友</td>
        <td>
            <ul>
                <li v-for="name in person.friend">{{name}}</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center">
            <input type="button" value="请求数据" @click="f()">
        </td>
    </tr>
</table>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script>
    let v=new Vue({
            el:"table",
            data:{
                person:{
                    name:"xxx",age:"xxx",
                    url:"../day05/head.jpg",
                    friend:[]
                }
            },
            methods:{
                f(){
                    v.person={
                        name:"苍老师",age: "18",
                        url: "../day05/aa.png",
                        friend: ["克晶","传奇","我"]
                    }
                }
            }
        })
</script>
</body>
</html>